<template>
  <div class="integrationExam">
    <head-Menu></head-Menu>
    <div class="IEContainer">
      <el-radio-group v-model="jump" size="medium" @change="getExamFile">
        <el-radio-button label="创建考试文件"></el-radio-button>
        <el-radio-button label="整合单科考试"></el-radio-button>
      </el-radio-group>
      <div v-if="jump == '创建考试文件'">
        <h1>创建考试文件</h1> 
        <el-form ref="form" :model="examFileForm" label-width="80px" style="width:400px;margin-left:0px;margin:0 auto;text-align:left;">
          <el-form-item label="文件名称">
            <el-input v-model="examFileForm.examFileName" maxlength="30" show-word-limit />
          </el-form-item>
          <el-form-item label="参与学生">
            <el-cascader v-model="examFileForm.examStu" :options="optionStu" :props="props" collapse-tags clearable :show-all-levels="false"></el-cascader>
          </el-form-item>
          <el-form-item label="参与教师">
            <el-cascader v-model="examFileForm.examTea" :options="optionTea" :props="props" collapse-tags clearable :show-all-levels="false"></el-cascader>
          </el-form-item>
          <el-form-item label="考试说明">
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 30}" placeholder="请输入内容" v-model="examFileForm.examFileExplain"></el-input>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button type="primary" @click="createExamFile">立即创建</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else-if="jump == '整合单科考试'" >
        <h1>整合单科考试</h1>
        <div style="max-height: 420px;overflow-y: auto;">
          <el-form ref="form" :model="integratedExamForm" label-width="80px" style="width:400px;margin-left:0px;margin:0 auto;text-align:left;">
            <el-form-item label="考试文件">
              <el-select style="width:100%" v-model="integratedExamForm.examFileName" placeholder="请选择考试文件">
                <el-option v-for="data in EFNList" :label="data" :value="data"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课 目">
              <el-checkbox-group v-model="integratedExamForm.subject">
                <el-checkbox-button label="语文" @change="deselect('语文')"></el-checkbox-button>
                <el-checkbox-button label="数学" @change="deselect('数学')"></el-checkbox-button>
                <el-checkbox-button label="英语" @change="deselect('英语')"></el-checkbox-button>

                <div v-if="isScience" style="margin-top:10px" >
                  <el-checkbox-button label="理科综合" @change="deselect('理科综合')"></el-checkbox-button>
                  <el-checkbox-button label="物理" disabled></el-checkbox-button>
                  <el-checkbox-button label="化学" disabled></el-checkbox-button>
                  <el-checkbox-button label="生物" disabled></el-checkbox-button>
                </div>
                <div v-else-if="!isScience" style="margin-top:10px">
                  <el-checkbox-button label="理科综合" @change="deselect('理科综合')"></el-checkbox-button>
                  <el-checkbox-button label="物理" @change="deselect('物理')"></el-checkbox-button>
                  <el-checkbox-button label="化学" @change="deselect('化学')"></el-checkbox-button>
                  <el-checkbox-button label="生物" @change="deselect('生物')"></el-checkbox-button>
                </div>

                <div v-if="isLiberalArts" style="margin-top:10px">
                  <el-checkbox-button label="文科综合"  @change="deselect('文科综合')"></el-checkbox-button>
                  <el-checkbox-button label="政治" disabled></el-checkbox-button>
                  <el-checkbox-button label="历史" disabled></el-checkbox-button>
                  <el-checkbox-button label="地理" disabled></el-checkbox-button>
                </div>
                <div v-else-if="!isLiberalArts" style="margin-top:10px">
                  <el-checkbox-button label="文科综合" @change="deselect('文科综合')"></el-checkbox-button>
                  <el-checkbox-button label="政治" @change="deselect('政治')"></el-checkbox-button>
                  <el-checkbox-button label="历史" @change="deselect('历史')"></el-checkbox-button>
                  <el-checkbox-button label="地理" @change="deselect('地理')"></el-checkbox-button>
                </div>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item v-for="(data, i) in integratedExamForm.subject" :label="data">
              <el-select style="width:100%" v-model="integratedExamForm.exam[i]" placeholder="请选择已发布的单科考试">
                <el-option v-for="data2 in EIList" v-if="data == data2.subject" :label="data2.examName" :value="data2.examName"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <el-button style="margin: 10px 0 20px 0" type="primary" @click="editExamFile">确定整合</el-button>
      </div>
    </div> 
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { createExamFile, getExamFile, editExamFile, getClasses, getTeacher } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      examFileForm: {
        examFileName: '',
        examFileExplain: '',
        examStu: [],
        examTea: [],
      },
      integratedExamForm: {
        examFileName: '',
        subject: [],
        exam: [],
      },
      EFNList: [],
      EIList: [],

      props: { multiple: true },
      optionStu: [],
      optionTea: [],

      jump: "创建考试文件",
      isScience: false,
      isLiberalArts: false,
    }
  },
  components: {
    headMenu
  },
  created() {
    this.getClasses()
    this.getTeacher()
  },
  methods: {
    async getClasses() {
      await getClasses()
        .then((res) => {
          for (let i = 0; i < res.enrollmentYear.length; i++) {
            let children = []
            for (let j = 0; j < res.classes.length; j++) {
              if (res.classes[j].slice(0, 2) == res.enrollmentYear[i].slice(2, 4)) {
                children.push({
                  value: res.classes[j],
                  label: res.classes[j] + '班'
                })
              }
            }
            this.optionStu.push({
              value: res.enrollmentYear[i],
              label: res.enrollmentYear[i] + '级',
              children: children
            })
          }
        })
    },
    async getTeacher() {
      await getTeacher()
        .then((res) => {
          console.log(res);
          this.optionTea = res.optionTea
        })
    },
    async createExamFile() {
      await createExamFile(this.examFileForm)
        .then((res) => {
          Toast(res.msg)
        })
    },
    async getExamFile() {
      if (this.jump == "整合单科考试") {
        await getExamFile()
          .then((res) => {
            this.EFNList = res.examFileName
            this.EIList = res.examInf
            console.log(this.EIList);
          })
      }
    },
    async editExamFile() {
      await editExamFile(this.integratedExamForm)
        .then((res) => {
          Toast(res.msg)
        })
    },
    deselect(subject) {
      // console.log(this.integratedExamForm);
      if(this.integratedExamForm.subject.indexOf(subject) == -1) {
        for (let i = 0; i < this.integratedExamForm.exam.length; i++) {
            if (this.EIList.find(data => data.examName === this.integratedExamForm.exam[i]).subject != this.integratedExamForm.subject[i]) {
              this.integratedExamForm.exam.splice(i, 1)
              break
            }
        }
      }
      if (subject == '理科综合') {
        this.isScience = !this.isScience
      }
      else if (subject == '文科综合') {
        this.isLiberalArts = !this.isLiberalArts
      }
    },
  },
}
</script>

<style lang='stylus'>
.integrationExam
  color #666
  flex 1 1 100%
  display block
  .IEContainer
    margin 0 10px
    border 1px solid #CCCCCC  
    text-align center

</style>